<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 图书管理 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button icon="el-icon-circle-plus" class="handle-del mr10 mybutton2" @click="addBook">新增图书</el-button>
                <el-input v-model="query.name" placeholder="图书名" class="handle-input mr10"></el-input>
                <el-button class="mybutton1" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column prop="book_id" label="编号" width="55" align="center"></el-table-column>
                <el-table-column prop="book_name" width="100" label="书名"></el-table-column>
                <el-table-column label="书价钱" width="100">
                    <template slot-scope="scope">￥{{ scope.row.book_price }}</template>
                </el-table-column>
                <el-table-column label="书封面" align="center" width="200">
                    <template slot-scope="scope">
                        <el-image
                            class="table-td-thumb"
                            :src="'http://172.22.10.90:3000/bookimages/' + scope.row.book_img"
                            :preview-src-list="['http://172.22.10.90:3000/bookimages/' + scope.row.book_img]"
                        ></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="book_inventory" align="center" label="库存" width="100"></el-table-column>

                <el-table-column label="借阅量" align="center" width="100" prop="book_borrow_num"> </el-table-column>
                <el-table-column prop="book_press" align="center" label="出版社"></el-table-column>
                <el-table-column prop="book_address" align="center" label="图书位置"></el-table-column>
                <el-table-column prop="book_data" width="200" label="入馆时间"></el-table-column>
                <el-table-column label="操作" width="300" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)" class="mybutton1"
                            >查看借阅信息</el-button
                        >
                        <el-button  icon="el-icon-delete" size="mini" @click="handleDelete(scope.row)" class="mybutton3">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="page"
                    :page-size="10"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="新增图书" :visible.sync="addVisible" width="50%">
            <el-form ref="addForm" :model="addForm" label-width="70px">
                <el-form-item label="书名">
                    <el-input v-model="addForm.book_name"></el-input>
                </el-form-item>
                <el-form-item label="入馆时间">
                    <el-col :span="11">
                        <el-date-picker
                            type="date"
                            placeholder="选择日期"
                            v-model="addForm.book_data"
                            value-format="yyyy-MM-dd"
                            style="width: 100%"
                        ></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="库存">
                    <el-input v-model="addForm.book_inventory"></el-input>
                </el-form-item>
                <el-form-item label="位置">
                    <el-input v-model="addForm.book_address"></el-input>
                </el-form-item>
                <el-form-item label="书价">
                    <el-input v-model="addForm.book_price"></el-input>
                </el-form-item>
                <el-form-item label="简介">
                    <el-input v-model="addForm.book_into"></el-input>
                </el-form-item>
                <el-form-item label="出版社">
                    <el-input v-model="addForm.book_press"></el-input>
                </el-form-item>
                <el-form-item label="图片">
                    <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        list-type="picture"
                    >
                        <el-button size="small" class="mybutton1">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button class="mybutton2" @click="addVisible = false">取 消</el-button>
                <el-button class="mybutton1" @click="addSure">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑弹出框 -->
        <el-dialog title="消息列表" :visible.sync="editVisible" width="50%">
            <div>
                <el-table :data="form" stripe style="width: 100%">
                    <el-table-column prop="stu_data" label="日期"> </el-table-column>
                    <el-table-column prop="stu_name" label="借阅人"> </el-table-column>
                    <el-table-column prop="stu_studentNumber" label="学号"> </el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="mybutton2" @click="editVisible = false">取 消</el-button>
                <el-button class="mybutton1" @click="editVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    name: 'tabs',
    data() {
        return {
            page: 1,
            query: {
                address: '',
                name: '',
                pageIndex: 1,
                pageSize: 10
            },
            tableData: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            pageTotal: 0,
            form: {},
            idx: -1,
            id: -1,
            addVisible: false,
            addForm: {},
            addFormRule: {},
            fileList: []
        };
    },
    created() {
        this.getData();
    },
    methods: {
        // 获取 easy-mock 的模拟数据
        getData() {
            axios({
                method: 'get',
                url: 'http://172.22.10.90:3000/books',
                params: {
                    page: this.page
                }
            }).then((res) => {
                this.tableData = res.data.data;
            });

            axios({
                method: 'get',
                url: 'http://172.22.10.90:3000/books/pagetotal'
            }).then((res) => {
                this.pageTotal = res.data.data.length;
            });
        },
        // 触发搜索按钮
        handleSearch() {
            console.log('hello');
        },
        // 删除操作
        handleDelete(role) {
            console.log(role);
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    axios({
                        method: 'delete',
                        url: 'http://172.22.10.90:3000/books/delete',
                        params: {
                            book_id: role.book_id
                        }
                    }).then((res) => {
                        this.getData();
                    });
                    this.$message.success('删除成功');
                })
                .catch(() => {});
        },
        // 多选操
        addBook() {
            this.addVisible = true;
        },
        addSure() {
            axios({
                method: 'post',
                url: 'http://172.22.10.90:3000/books/add',
                params: this.addForm
            });
            this.getData();
            this.addVisible = false;
            this.$message.success('增加图书成功!');
            this.$refs.addForm.resetFields();
        },
       
        // 编辑操作
        handleEdit(role) {
            axios({
                method:'get',
                url:'http://172.22.10.90:3000/students/message',
                params: {
                    book_number:String(role.book_number)
                }
            }).then((res) => {
                this.form = res.data.data
            })
            this.editVisible = true;
        },
       
        // 分页导航
        handlePageChange(val) {
            this.page = val;
            this.getData();
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.mybutton1 {
    border: 0;
    color: #fff;
    border-radius: 15px;
    background-color: rgb(108, 174, 194);
}
.mybutton1:hover {
    border: 0;
    color: #fff;
    border-radius: 15px;
    background-color: rgb(3, 58, 161);
}

.mybutton2 {
    border: 0;
    color: #fff;
    border-radius: 15px;
    background-color: rgb(250, 136, 55);
}
.mybutton2:hover {
    border: 0;
    color: #fff;
    border-radius: 15px;
    background-color: rgb(219, 107, 28);
}

.mybutton3 {
    border: 0;
    color: #fff;
    border-radius: 15px;
    background-color: rgb(197, 45, 7);
}
.mybutton3:hover {
    border: 0;
    color: #fff;
    border-radius: 15px;
    background-color: rgb(150, 33, 3);
}
</style>
